<template>
  <ul>
    <li v-for="item in list" :key="item.id" ref="ulRef">
      {{ item.name }} --- {{ item.age }}
    </li>
  </ul>

  <div v-if="isShow" :ref="getDivRef">hello</div>
  <div>
    <ChildView ref="childCom"></ChildView>
    <ChildTwo ref="childTwo" />
  </div>
  <button @click="getSonData">获取子组件里面的数据</button>
  <button @click="getSonData2">获取2子组件里面的数据</button>
</template>
<script setup>
import {ref,onMounted} from 'vue'
import ChildView from './components/ChildView.vue'
import ChildTwo from './components/ChildTwo.vue';
const list = ref([
  {
    id:1,
    name:'zs',
    age:18
  },
  {
    id:2,
    name:'ls',
    age:18
  }
])

const isShow = ref(true)

// ulRef 顺序不保证和 list 顺序一致
const ulRef = ref([])
const childCom = ref(null)
const childTwo = ref(null)


onMounted(()=>{
  console.log("ulRef==>",ulRef);
  ulRef.value[0].style.color='red'
  console.log('childCom===>',childCom);
})

const getDivRef = (el)=>{
  console.log('el===>',el);
}

const getSonData = ()=>{
  console.log('childCom.value.count===>',childCom.value.count);
  console.log('childCom.value.age===>',childCom.value.age);
}
const getSonData2 = ()=>{
  console.log('childTwo.value.msg===>',childTwo.value.msg);
}
</script>